<template>
	<view class="content" v-if="token">
		<!-- <my-login></my-login> -->
		<view class="name">
			<view class="info" @click="jumpSettings" style="border-radius: 50%; overflow: hidden;  ">
				<image :src="data.avatar" mode="aspectFit" style="display: flex;  align-items: center; justify-content: center;"></image>
			</view>
			<view class="info1">
				<text class="text">{{ data.user_nickname }}</text>
				<view class="textt">
					<text class="text1" v-if="data.is_monthmom !== 0">月嫂</text>
					<text class="text1" v-if="data.is_channel !== 0">渠道</text>
					<text class="text1" v-if="data.is_channel == 0 && data.is_monthmom == 0">未认证</text>
					<text class="renzheng" v-if="data.is_monthmom == 1 && data.dispatch_status == 0">等待派单</text>
					<text class="renzheng" v-else-if="data.is_monthmom == 1 && data.dispatch_status == 1">上单中</text>
					<text class="renzheng" v-else-if="data.is_monthmom == 1 && data.dispatch_status == 2">请假中</text>
				</view>
			</view>
			<navigator url="./setUp/setUp">
				<view class="info2"><image src="../../static/shezhi1.png" mode=""></image></view>
			</navigator>
		</view>
		<view class="amt">
			<view class="shuxian"></view>
			<view class="shuxian1"></view>
			<view class="amt1">
				<text>{{ data.flower }}</text>
				<text>鲜花</text>
			</view>
			<view style="margin-left: -18rpx" class="amt2">
				<text>￥{{ data.balance | curreny }}</text>
				<text>余额</text>
			</view>

			<view class="amt3" @click="withdraw">
				<view class="image"><image src="../../static/my4.png" mode=""></image></view>
				<text>提现</text>
			</view>
		</view>
		<view class="serv">我的服务</view>
		<view class="list">
			<view class="list1">
				<image src="../../static/yaoqingma.png" mode="" style="width: 44rpx; height: 44rpx; margin-right: 20rpx"></image>
				<text>邀请码</text>
				<text class="invitationCd">ID:{{ data.user_invitestr }}</text>
			</view>
			<view class="list1" @click="jumpAllowance">
				<image src="../../static/shezhi2.png" mode="" style="width: 44rpx; height: 44rpx; margin-right: 20rpx"></image>
				<text>管理津贴</text>
			</view>
			<view class="list2" @click="yuesaoTeam">
				<image src="../../static/my.png" mode="" style="width: 30rpx;height: 42rpx;margin-right: 30rpx;margin-left: 30rpx;"></image>
				<text>我的月嫂团队</text>
			</view>
			<navigator url="./certification/certification">
				<view class="list3">
					<image src="../../static/my2.png" mode="" style="width: 40rpx; height: 30rpx; margin-right: 24rpx"></image>
					<text>身份认证</text>
				</view>
			</navigator>
		</view>
		<view class="dlyTask">每日任务</view>
		<view class="taskList">
			<view class="list">
				<view class="info">
					<image src="../../static/my8.png" mode=""></image>
					<view class="view">
						<text class="text">每日签到</text>
						<text class="text1">签到获得好礼</text>
					</view>
				</view>
				<view class="inof1" @click="sgnIn" v-if="signstatus">已签到</view>
				<view class="inof1" @click="sgnIn" v-else>签到</view>
			</view>
			<view class="list1">
				<view class="info">
					<image src="../../static/my9.png" mode=""></image>
					<view class="view">
						<text class="text">每日学习数量</text>
						<text class="text1">学习获得好礼</text>
					</view>
				</view>
				<view class="inof1">{{ shuliang }}/1</view>
			</view>
			<view class="list2">
				<view class="info">
					<image src="../../static/my5.png" mode=""></image>
					<view class="view">
						<text class="text">拉新</text>
						<text class="text1">拉新获得好礼</text>
					</view>
				</view>
				<view class="inof1"><button open-type="share" class="u-reset-button">拉新</button></view>
			</view>
		</view>
		<u-modal
			v-model="show"
			confirm-color="#1A1A1A"
			@confirm="confirm"
			:mask-close-able="true"
			show-title="false"
			
			z-index="9999999"
		>
			<view class="slot-content" style="padding: 50rpx 100rpx">
				<view class="">
					<text class="text">金额 :</text>
					<input type="number" value="" v-model="applymoney" placeholder="请输入提现金额" />
				</view>

				<view class="">
					<text class="text">姓名 :</text>
					<input type="text" value="" v-model="name" placeholder="请输入姓名" />
				</view>
				<view class="">
					<text class="text">卡号 :</text>
					<input type="number" value="" v-model="bankcard" placeholder="请输入银行卡号" />
				</view>
				<view class="">
					<text class="text">开户行 :</text>
					<input type="text" value="" v-model="bank" placeholder="请输入开户行" />
				</view>
			</view>
		</u-modal>
		<u-popup v-model="show1" mode="bottom" border-radius="14" height="250rpx">
			<view class="ddd"><button class="cu-btn" open-type="getPhoneNumber" @getphonenumber="getMobileNum">获取手机号码</button></view>
		</u-popup>

		<!-- <view class="btn-group flex justify-center">
			<button class="cu-btn padding bg-gradual-blue text-bold text-price" open-type="getPhoneNumber" @getphonenumber="getMobileNum">
				手机号码
			</button>
		</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			show1: true,
			content: '获取手机号码',
			show: false,
			applymoney: '', //  提现金额
			name: '', // 姓名
			bankcard: '', //  银行卡号
			bank: '', // 开户行
			qiandao: '',
			data: {},
			token: '',
			shuliang: 0,
			signstatus: '',
		};
	},

	methods: {
		//提现
		withdraw() {
			console.log('提现:>> ', this.data.mobile);
			if (this.data.mobile) {
				this.show = true;
			} else {
				uni.navigateTo({
					url: './setUp/setUp',
				});
				uni.$showMsg('请先认证手机号码');
			}
		},
		// 跳转我的月嫂团队
		yuesaoTeam() {
			uni.switchTab({
				url: '../guanli/guanli',
			});
		},
		// 提现金额
		async confirm() {
			// applymoney: '', //  提现金额
			// name: '', // 姓名
			// bankcard: '', //  银行卡号
			// bank: '', // 开户行
			if (!this.applymoney) return uni.$showMsg('请输入提现金额');
			
			if (!this.name) return uni.$showMsg('请输入姓名');
			if (!this.bankcard) return uni.$showMsg('请输入银行卡号');
			if (!this.bank) return uni.$showMsg('请输入开户行');

		
			
			const res = await this.$u.post(
				'/api/Commission/apply',
				{
					applymoney: this.applymoney,
					name: this.name,
					bankcard: this.bankcard,
					bank: this.bank,
				},
				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp',
				},
			);
			console.log('res >>  ', res);
			uni.$showMsg(res.msg);
			this.applymoney = ''
			this.name = ''
			this.bankcard = ''
			this.bank = ''
			var _this  = this
 			setTimeout(() => {
				
				//_this.show = false;
				
				_this.personalCtr();
			}, 1000);
			
		},

		// 跳转设置
		jumpSettings() {
			uni.navigateTo({
				url: './setUp/setUp',
			});
		},
		// 跳转津贴

		jumpAllowance() {
			uni.navigateTo({
				url: './jintie/jintie',
			});
		},
		// 签到
		async sgnIn() {
			const res = await this.$u.post(
				'/api/User/user_sign',
				{},
				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp',
				},
			);
			uni.$showMsg(res.msg);
			this.taskSts();
		},
		// 用户每日任务状态
		async taskSts() {
			const res = await this.$u.post(
				'/api/User/usertask_status',
				{},
				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp',
				},
			);
			this.signstatus = res.data.sign_status;
			this.personalCtr();
		},
		// 个人中心（用户基础数据）
		async personalCtr() {
			const res = await this.$u.post(
				'/api/User/userinfo',
				{},
				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp',
				},
			);

			this.data = res.data;
			uni.setStorageSync('user_invitestr', res.data.user_invitestr);
			uni.setStorageSync('id', res.data.id);
		},
		// 获取手机号码
		async getMobileNum(e) {
			const [err, res] = await uni.login().catch(err => err);
			if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败！');
			const obj = {
				session_key: uni.getStorageSync('session_key'),
				encrypted_data: e.detail.encryptedData,
				iv: e.detail.iv,
				code: res.code,
			};
			const ress = await this.$u.get('/api/User/getmobile', obj);
			uni.$showMsg(ress.msg);
			this.show1 = false;
			uni.setStorageSync('phone', ress.data);
			console.log('ress --------------------------- : >> ', ress);
		},
	},
	onShow() {
		this.shuliang = uni.getStorageSync('shuliang');
		this.taskSts();
		if (uni.getStorageSync('phone')) {
			this.show1 = false;
		}
	},
	onLoad() {
		if (uni.getStorageSync('phone')) {
			this.show1 = false;
		}
		try {
			const token = uni.getStorageSync('token');
			if (token) {
				console.log('token :>> ', token);
				this.token = token;
				this.personalCtr();
			} else {
				uni.reLaunch({
					url: '../login/login',
				});
			}
		} catch (e) {}
	},
	onShareAppMessage(e) {
		console.log('this.data.id :>> ', this.data.id);
		return {
			title: '考拉妈妈邀请你赚钱, 邀请码:' + this.data.user_invitestr,
			path: '/pages/zhixun/zhixun?user_id=' + this.data.id,
			imageUrl: 'https://s3.ax1x.com/2021/01/04/sPoBfH.jpg',
			success: function(res) {
				if (res.errMsg == 'shareAppMessage:ok') {
				}
			},
		};
	},
	
	filters: {
		curreny: function(data) {
			console.log('data :>> ', data);
			data = Number(data).toFixed(2);
			if (data == parseInt(data)) {
				data = parseInt(data);
			}
			return data;
		},
		moneyFormat: function(arg) {
			if (arg.toString().length >= 13) {
				// return arg/1000000000000+"万亿"
				const moneys = arg / 1000000000000;
				const realVal = parseFloat(moneys).toFixed(2);
				return realVal + '万亿';
			} else if (arg.toString().length >= 9) {
				const moneys = arg / 100000000;
				const realVal = parseFloat(moneys).toFixed(2);
				return realVal + '亿';
			} else if (arg.toString().length >= 4) {
				const moneys = arg / 10000;
				const realVal = parseFloat(moneys).toFixed(2);
				return realVal + '万';
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	.slot-content {
		.text {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #000000;
		}
		input {
			margin: 10rpx 5rpx;
			padding-left: 5rpx;
			border-bottom: 1rpx solid #c8c7cc;
		}
	}
	// background-color: #f8f8f8;
	/deep/.ddd {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.cu-btn {
		height: 70rpx;
		font-size: 30rpx;
		width: 690rpx;
		margin: 0 auto !important;
		color: #ffffff;
		background-color: #671729;
	}
	.name {
		width: 100vw;
		height: 209rpx;
		background-color: #f8f8f8;
		display: flex;
		align-items: center;
		padding-top: 51rpx;
		padding-left: 19rpx;
		.info {
			width: 144rpx;
			height: 144rpx;
			
			image {
				width: 100%;
				height: 100%;
				// margin-left: 19rpx;
			}
		}
		.info1 {
			display: flex;
			flex-direction: column;
			margin-left: 41rpx;

			.text {
				font-size: 40rpx;

				height: 42rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #1a1a1a;
				line-height: 25rpx;
			}
			.textt {
				width: 100%;
				height: 60rpx;

				.renzheng {
					width: 101rpx;
					display: inline-block;
					height: 30rpx;
					line-height: 30rpx;
					text-align: center;
					background-color: #fdebe0;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #5a1524;
				}
				.text1 {
					display: inline-block;

					width: 156rpx;
					height: 60rpx;
					line-height: 52rpx;

					padding-left: 62rpx;
					background: url(https://s3.ax1x.com/2020/11/27/DBf09x.png) no-repeat center #f8f8f8;
					background-size: cover;

					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;

					text-shadow: 0rpx 2rpx 4rpx #42cda1;
				}
			}
		}
		.info2 {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
			width: 45rpx;
			height: 43rpx;

			// background-color: #0081ff;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.amt {
		position: relative;
		width: 690rpx;
		height: 160rpx;
		margin: 0 auto;
		background: linear-gradient(0deg, #6e182b 0%, #601626 100%);
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(96, 22, 38, 0.36);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-between;
		padding: 36rpx 81rpx;
		.shuxian,
		.shuxian1 {
			position: absolute;
			top: 50%;

			width: 2rpx;
			height: 30rpx;
			background: #fdebe0;
		}

		.shuxian {
			right: 33.3333%;
			transform: translateY(-50%);
		}
		.shuxian1 {
			//padding: 36rpx 81rpx;
			left: 33.333%;
			transform: translateY(-50%);
		}

		.amt1,
		.amt2,
		.amt3 {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			text:nth-child(1) {
				font-size: 48rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
				line-height: 40rpx;
				margin-bottom: 30rpx;
			}
			text:nth-child(2) {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 40rpx;
			}
		}

		.amt3 {
			.image {
				width: 46rpx;
				height: 40rpx;
				margin-bottom: 30rpx;
				image {
					width: 46rpx;
					height: 40rpx;
				}
			}
		}
	}
	.serv {
		width: 146rpx;

		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1a1a1a;
		margin: 59rpx 19rpx 19rpx 30rpx;
	}
	.list {
		.list1,
		.list2,
		.list3 {
			position: relative;
			margin: 0 auto;
			width: 690rpx;
			height: 100rpx;
			background: #ffffff;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.invitationCd {
				position: absolute;
				right: 20rpx;
				top: 50%;
				color: #1a1a1a;
				transform: translateY(-50%);
			}

			image {
				width: 40rpx;
				height: 40rpx;
				// margin: 0 26rpx;
				margin-left: 26rpx;
			}
			text {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #1a1a1a;
			}
		}
	}
	.dlyTask {
		margin: 40rpx 30rpx 19rpx 19rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1a1a1a;
	}
	.taskList {
		.list,
		.list1,
		.list2 {
			padding: 0 30rpx;
			margin-bottom: 30rpx;
			height: 70rpx;
			display: flex;
			justify-content: space-between;

			.inof1 {
				width: 100rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background: #671729;
				border-radius: 20rpx;
				font-size: 24rpx;
				// font-family: PingFang SC;
				font-weight: bold;
				color: #ffffff;
			}
			.info {
				display: flex;
				align-items: center;

				image {
					width: 70rpx;
					height: 70rpx;
					margin-right: 20rpx;
				}
				.view {
					height: 70rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.text {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #1a1a1a;
					}
					.text1 {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #999999;
					}
				}
			}
		}
	}
}
</style>
